<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>
  </head>
  <body>
  
  </body>
  <script>
    // async定义于函数声明前，返回值为Promise对象
    async function func1() {
      undefinedFunc();
      return 'func1';
    }
    func1().then(res => {
      console.log('then', res);
    }).catch(res => {
      console.log('catch', res);
    });
    // 输出结果：catch ReferenceError: undefinedFunc is not defined
    
    // await必须在async函数内使用，定义于Promise对象前
    async function func2() {
      console.log('start');
      await new Promise(() => {}); // 未结束一直等待
      console.log('end');
    }
    func2();
    // 输出结果：start
    
    // await必须在async函数内使用，定义于Promise对象前，返回值为Promise响应结果
    function handlerPromise() {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('await');
          resolve('res');
        }, 3000);
      });
    }
    async function func3() {
      console.log('start');
      let res = await handlerPromise();
      console.log('end', res);// 该段代码作为then部分在Chrome事件循环中有体现
    }
    func3();
    // 输出结果：start - await - end res
    
    // func3()相当于以下代码
    new Promise((resolve, reject) => {
      console.log('start');
      resolve();
    }).then(() => {
      new Promise((resolve, reject) => {
        setTimeout(() => {
          console.log('await');
          resolve('res');
        }, 3000);
      }).then((res) => {
        console.log('end', res);// 该段代码作为then部分在Chrome事件循环中有体现
      });
    });
  </script>
</html>